<template>
    <div id="login">
        <div class="login">
            <img src="@/assets/img/web/login-user.jpg" class="login-user pc" />
            <img src="@/assets/img/web/login-user-bg.jpg" class="login-user-bg pc" />
            <div class="content">
                <a-spin size="large" :spinning="isLoading">
                    <div class="title">注册</div>
                    <div class="form">
                        <a-form
                            :model="formState"
                            name="basic"
                            :label-col="{ span: 8 }"
                            :wrapper-col="{ span: 16 }"
                            autocomplete="off"
                            @finish="onFinish"
                        >
                            <a-form-item label="邮箱" name="email" :rules="[{ required: true, message: '请输入邮箱' }]" >
                                <a-input v-model:value="formState.email" />
                            </a-form-item>

                            <a-form-item label="密码" name="password"  :rules="[{ required: true, message: '请输入密码' }]" >
                                <a-input-password v-model:value="formState.password" />
                            </a-form-item>

                            <a-form-item label="确认密码" name="repassword"  :rules="[{ required: true, message: '请输入确认密码' }]" >
                                <a-input-password v-model:value="formState.repassword" />
                            </a-form-item>

                            <a-form-item name="remember" :wrapper-col="{ offset: 8, span: 16 }">
                                <router-link :to="{ name: 'web_login' }">已有账号，去登录>></router-link>
                            </a-form-item>

                            <a-form-item class="pc" :wrapper-col="{ offset: 8, span: 16 }">
                                <a-button type="primary" html-type="submit">注册</a-button>
                            </a-form-item>
                            <a-form-item class="mobile" :wrapper-col="{ offset: 6, span: 4 }">
                                <a-button type="primary" html-type="submit">注册</a-button>
                            </a-form-item>

                            <a-form-item name="remember" :wrapper-col="{ offset: 8, span: 16 }">
                                <router-link :to="{ name: 'web_index' }">暂不注册，回首页>>></router-link>
                            </a-form-item>
                        </a-form>
                    </div>
                </a-spin>
            </div>
        </div>
    </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { message } from 'ant-design-vue'
import { register } from "@/api/web"   //引入api
import { useRoute, useRouter } from 'vue-router';

const router = useRouter();

const isLoading = ref(false);    // 控制loading

const formState = reactive({
  username: '',
  password: '',
  repassword: '',
});

const onFinish = values => {
    if (formState.password !== formState.repassword) {
        message.error('两次密码输入不一致')
        return;
    }
    isLoading.value = true

    register(formState).then((res) => {
        isLoading.value = false
        if (res === false) return;

        message.success('注册成功')
        router.replace('/login')
    }).catch((rej) => {
        isLoading.value = false
        message.error('错误：'+rej)
    });
};
</script>

<style scoped>
.login {
    width: 100%;
    height: 100%;
}

.bg {
    display: block;
}

.login-user {
    position: fixed;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
}

.login-user-bg {
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    right: 0;
    z-index: -2;
}

.content {
    position: absolute;
    top: 20%;
    right: 20%;
    /* transform: translate(-50%, -50%); */
    width: 400rem;
    background-color: #fff;
    border-radius: 10rem;
    box-shadow: 0 0 10rem rgba(0, 0, 0, 0.3);
    z-index: 2;
    padding: 20rem;
}

.title {
    text-align: center;
    font-size: 26rem;
    margin-top: 50rem;
    font-weight: bold;
}

.form {
    margin-top: 50rem;
    overflow-x: hidden;
}

:deep(.form) {
    padding-right: 10%;
}

:deep(.ant-btn) {
    width: 50%;
}

/*手机端样式*/
@media screen and (max-width: 800px) {
    .content {
        position: relative;
        width: 100%;
        z-index: 2;
        padding: 20rem;
        top:0;
        right: 0;
        border-radius: 0;
        box-shadow: none;
    }
    :deep(.form) {
        padding-right: 20rem;
        padding-left: 20rem;
    }
}
</style>
